<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/回到顶部.css">
    <link rel="stylesheet" href="./css/头部菜单栏.css">
    <style>
        .head-end {
            width: 1200px;
            margin: 0 auto;
        }

        .head-end-le {
            width: 200px;
            height: 94px;
            /* background-color: firebrick; */
        }

        .head-end-ri {
            position: relative;
            margin-top: 20px;
            height: 48px;
            /* z-index: 9999; */
            left: -350px;
            width: 450px;
            top: 0;
            border: 2px solid firebrick;
        }

        .head-end-ri form {
            height: 50px;
            border: 2px solid firebrick;
            border: none;
            /* position: absolute; */
        }

        .head-end-ri form .je {
            display: inline-block;
            width: 88px;
            height: 48px;
            background-color: gainsboro;
            position: relative;
            /* top: -11px; */
            line-height: 49px;
            text-align: center;
            right: -2px;
        }

        .head-end-ri form input {
            margin-left: 10px;
            width: 300px;
            height: 46px;
            /* border: 2px solid firebrick; */
            border: none;
            position: relative;
            top: -2px;

        }

        .head-end-ri form button {
            width: 46px;
            height: 48px;
            background: url("./images/head_sprite.png");
            background-position: -368px -389px;
            /* border: 2px solid firebrick; */
            background-color: red;
            border: none;
            /* position: absolute; */
        }

        /* .head-end-ri form */

        .head-end-ri form .icon {
            width: 13px;
            height: 7px;
            overflow: hidden;
            background: url("./images/head_sprite.png") no-repeat -14px -90px;
            position: absolute;
            right: 0px;
            top: 21px;
        }

        .head-end .shoppingcar {
            width: 200px;
            height: 50px;
            background-color: aliceblue;
            position: absolute;
            right: 468px;
            top: 56px;
            line-height: 50px;
            /* position: relative; */
        }

        .head-end .shoppingcar .icon {
            width: 30px;
            height: 30px;
            overflow: hidden;
            background: url("./images/head_sprite.png") no-repeat 3px -160px;
            position: absolute;
            right: 170px;
            top: 8px;
            /* padding-top: 20px; */
        }

        .head-end .shoppingcar span {
            margin-left: 34px;
        }

        .head-end .shoppingcar span:nth-child(1) {
            display: inline-block;
            /* height: 50px; */
            /* background-color: teal; */
            background-color: turquoise;
            text-align: center;
            /* line-height: 50px; */
        }

        .head-end .search-hot {
            float: left;
            position: absolute;
            right: 850px;
            top: 105px;
            font-size: 10px;
            color: #969696;
        }

        .head-end .supper-search {
            float: left;
            position: absolute;
            right: 699px;
            top: 105px;
            font-size: 10px;
        }

        /* 导航栏头部 */

        .nav-top {
            width: 100%;
            height: 40px;
            border-bottom: 3px solid #ff2832;
        }

        .nav-top ul li {
            float: left;
            right: 0;
        }

        .nav-top ul .kk1 {
            position: relative;
            right: -370px;
            top: 10px;
        }

        .nav-top ul .kk1 a {
            /* position: relative; */
            padding-left: 10px;
        }

        .nav-top ul li .all {
            width: 200px;
            height: 40px;
            display: inline-block;
            margin-right: 17px;
            text-align: left;
            background-color: #ff2832;
            position: relative;
            color: #fff;
            padding-left: 10px;
            left: 353px;
            line-height: 40px;
            /* background: url("./images/head_sprite.png")no-repeat;
            background-position: 161px -567px;; */
        }

        .nav-top ul li .amg {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url("./images/head_sprite.png")no-repeat;
            background-position: 8px -571px;
            position: absolute;
            background-color: #ff2832;
            left: 512px;
            top: 134px;
        }

        .nav_top ul li.all a {
            padding: 0 0 0 20px;
            display: block;
            width: 171px;
            background: url() no-repeat 161px -567px;
            color: #fff;
        }

        /* sub部分 */

        /* 水平菜单部分 */

        .horiz-menu {
            width:
        }
    </style>
</head>

<body style="height: 4000px;">
    <!-- <div class=""></div> -->
    <div id="head">
        <div class="nav clearfix">
            <div class="nav-left fl">
                <a href="" class="biao">
                    送至:北京
                </a>
                <ul>
                    <li>北京</li>
                    <li>天津</li>
                    <li>河北</li>
                    <li>山西</li>
                    <li>内蒙古</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                </ul>
            </div>
            <div class="nav-right fr">
                <ul class="">
                    <li>
                        <a href="">我的云书房</a>
                    </li>
                    <li>
                        <a href="" class="biao1">我的当当</a>
                        <ul class="unactive">
                            <li>
                                <a href="">我的订单</a>
                            </li>
                            <li>
                                <a href="">我的购物车</a>
                            </li>
                            <li>
                                <a href="">我的购物车</a>
                            </li>
                            <li></li>
                        </ul>
                    </li>
                    <li>
                        <a href="" class="biao1" id="lings">0元购物</a>
                        <ul class="unactive">
                            <li>
                                <a href="">0元领物</a>
                            </li>
                            <li>
                                <a href="">当当拼团</a>
                            </li>
                            <li>
                                <a href="">一元砍价</a>
                            </li>
                            <li>
                                <a href="">1分抽奖</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">小说投稿</a>
                    </li>
                    <li>
                        <a href="">我要出书</a>
                    </li>
                    <li>
                        <a href="" class="biao1" style="padding-right: 19px;">企业采购</a>
                        <ul class="unactive">
                            <li>
                                <a href="">大宗采购</a>
                            </li>
                            <li>
                                <a href="">大宗采购</a>
                            </li>
                            <li>
                                <a href="">大宗采购</a>
                            </li>
                            <li>
                                <a href="">大宗采购</a>
                            </li>
                            <li>
                                <a href="">大宗采购</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="" class="biao1" style="padding-right: 19px">客服服务</a>
                        <ul class="unactive">
                            <li>
                                <a href="">帮助中心</a>
                            </li>
                            <li>
                                <a href="">自动退换货</a>
                            </li>
                            <li>
                                <a href="">自动退换货</a>
                            </li>
                            <li>
                                <a href="">自动退换货</a>
                            </li>
                            <li>
                                <a href="">自动退换货</a>
                            </li>
                            <li>
                                <a href="">自动退换货</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <script src="./js/头部菜单栏.js"></script>
                <div class="nav-right-r">
                    <span>
                        欢迎光临当当，请
                        <a href="" style="color: orange">登录</a>
                        <a href="">成为会员</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 返回顶部 -->
    <div id="db">
        <a href="javascript:">
            <img alt="" class="img-1">
            <span>联系qq：86639063</span>
        </a>
        <a href="javascript:">
            <img alt="" class="img-2">
            <span>电话10086</span>
        </a>
        <a href="javascript:">
            <img alt="" class="img-3">
            <span>微信111</span>
        </a>
        <a href="javascript:">
            <img alt="" class="img-4 nn">
            <span class="">回到顶部</span>
        </a>
    </div>
    <!-- 头部后面区域 -->
    <div class="head-end clearfix">
        <div class="head-end-le fl">
            <div class="" style="width: 342px;height: 77px;background-color: skyblue;">
                <img src="./images/DDlogoNEW.gif" alt="">
            </div>
        </div>
        <div class="head-end-ri fr">
            <form action="">
                <!-- <label for=""></label> -->
                <input type="text" placeholder="理财真好玩">
                <div class="je">
                    <span>全部分类</span>
                    <span class="icon"></span>
                </div>
                <button class="fr">""</button>
            </form>
        </div>
        <div class="shoppingcar">
            <span>
                <span class="icon"></span>
                <a href="">购物车</a>
                <a href="">0</a>
            </span>
            <span>
                <a href="">我的订单</a>
            </span>
        </div>
        <div class="search-hot">
            <span>热搜：</span>
            <a href="">走出舒适区</a>
            <a href="">少儿科普</a>
            <a href="">风流人间</a>
            <a href="">同年</a>
            <a href="">流年-鲁念安</a>
        </div>
        <div class="supper-search">
            <a href="">高级搜索</a>
        </div>
    </div>
    <div class="nav-top">
        <ul>
            <li>
                <a href="" class="all">全部商品分类</a>
                <a href="" class="amg"></a>
            </li>
            <div class="kk1">
                <li>
                    <a href="">图书</a>
                </li>
                <li>
                    <a href="">电子书</a>
                </li>
                <li>
                    <a href="">网络文学</a>
                </li>
                <li>
                    <a href="">服装</a>
                </li>
                <li>
                    <a href="">户外运动</a>
                </li>
                <li>
                    <a href="">孕婴童</a>
                </li>
                <li>
                    <a href="">家居</a>
                </li>
                <li>
                    <a href="">当当优品</a>
                </li>
                <li>
                    <a href="">食品</a>
                </li>
                <li>
                    <a href="">Apple</a>
                </li>
                <li>
                    <a href="">电器城</a>
                </li>
            </div>
        </ul>
    </div>

    <!-- sub部分 -->
    <div class="sub">
        <ul>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
            <li>
                <a href=""></a>
            </li>
        </ul>
    </div>
    <div class="horiz-menu"></div>
    <script src="./js/回到顶部.js"></script>
</body>

</html>